<template>
  <el-container>
    <el-header>
      <el-card style="background: paleturquoise">
        我的订单,
        <el-button type="text" @click="goback()" align="right">返回商城首页</el-button>
      </el-card>
    </el-header>
  <el-main>
    <el-table
        :data="tableData"
        style="    width: 100%">
      <el-table-column
          prop="oid"
          label="订单编号"
          width="180">
      </el-table-column>
      <el-table-column
          label="商品,数量,颜色"
          width="180">
        <template slot-scope="scope">
          <span>
            {{scope.row.gname}}
            {{scope.row.gnumber}}
            {{scope.row.color}}
          </span>
        </template>
      </el-table-column>
      <el-table-column
          prop="oname"
          label="收货人"
          width="150">
      </el-table-column>
      <el-table-column
          prop="ophone"
          label="手机号"
          width="150">
      </el-table-column>
      <el-table-column
          prop="cretime"
          label="订单创建时间"
          width="120">
      </el-table-column>
      <el-table-column
          prop="status"
          label="状态"
          width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.status==1">
            待付款
          </span>
          <span v-if="scope.row.status==2">
            已付款
          </span>
          <span v-if="scope.row.status==3">
            已取消订单
          </span>
          <span v-if="scope.row.status==4">
            待发货
          </span>
        </template>
      </el-table-column>
      <el-table-column
          prop="gsum"
          label="总价"
          width="100">
      </el-table-column>
      <el-table-column
          prop="address"
          label="地址">
      </el-table-column>
      <el-table-column
          prop="uname"
          label="昵称">
      </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <span v-if="scope.row.status==1">
              <el-button
                  size="mini"
                  type="danger"
                  @click="handleEdit(scope.row)">去付款</el-button>
            </span>
            <el-button
                size="mini"
                type="danger"
                @click="handleDelete( scope.row)">删除</el-button>

          </template>
        </el-table-column>
    </el-table>
  </el-main>
  <el-footer>
    <el-card style="background: paleturquoise">
    </el-card>
  </el-footer>
  </el-container>
</template>

<script>
export default {
  name: "Order",
  data() {
    return {
      tableData: [

      ],
    }
  },
  created() {
    this.getorder();
  },
  methods:{
    getorder(){
      this.axios.get("http://localhost:9999/order/getorderlist").then((res)=>{
        if (res){
          console.log(res.data.records);
          this.tableData=res.data.records;
        }
      })
    },
    goback(){
      this.$router.push({path:"/"});
    },
    handleEdit(row){
      window.open("http://localhost:8080/");
      this.axios.post("http://localhost:9999/order/updatestatus",row).then((res)=>{
        if (res.data.result){
          //this.$message.success("付款成功!");
          this.getorder();
        }
      })
    },
    handleDelete(row){
      this.$message.success("删除成功!");
      this.axios.post("http://localhost:9999/order/delordersbyoid",row).then((res)=>{
        if (res.data.result){
          this.getorder();
        }
      })
    }
  }

}
</script>

<style scoped>

</style>